<template>
  <el-form ref="activeSysUser" :model="activeSysUser" :rules="rules" label-width="120px" style="width: 90%;margin:5% ">
    <el-form-item label="用户名" required prop="userName">
      <el-input v-model="activeSysUser.userName" :disabled=!!activeSysUser.pkid></el-input>
    </el-form-item>
    <el-form-item label="E-mail" prop="email">
      <el-input v-model="activeSysUser.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" required prop="mobilePhoneNumber">
      <el-input v-model="activeSysUser.mobilePhoneNumber"></el-input>
    </el-form-item>
    <el-form-item label="角色" required prop="roleId">
      <el-select v-model="activeSysUser.roleId" placeholder="请选择" style="width:100%">
        <el-option
          v-for="item in roles"
          :label="item.roleName"
          :value="item.pkid">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker type="datetime" :disabled=true placeholder="选择日期" v-model="activeSysUser.createDate" style="width: 100%;"></el-date-picker>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="activeSysUser.status">
        <el-radio :label="'1'">在用</el-radio>
        <el-radio :label="'0'">停用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" v-if="hasRight('edit')">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<style>
</style>
<script>
  import mixin from '../../../mixin/rights'
  import userApi from '../../../api/sys/userApi'
  import roleApi from '../../../api/sys/roleApi'
  import {vEmail, vPhone} from '../../../common/js/validate'

  export default{
    data () {
      return {
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
          email: [
            { validator: vEmail, trigger: 'blur' }
          ],
          mobilePhoneNumber: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: vPhone, trigger: 'blur' }
          ],
          roleId: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ]
        },
        activeSysUser: {},
        roles: []
      }
    },
    mixins: [mixin],
    created () {
      roleApi.getRoles(1, 99).then(resp => {
        this.roles = resp.body.data
      })
      if (this.$route.params.id !== 'create') {
        userApi.queryById(this.$route.params.id).then((resp) => {
          this.activeSysUser = resp.body.data
        })
      } else {
        this.$set(this.activeSysUser, 'status', '1')
        this.$set(this.activeSysUser, 'createDate', new Date())
        this.$set(this.activeSysUser, 'roleId', '')
      }
    },
    methods: {
      onSubmit () {
        this.$refs.activeSysUser.validate((valid) => {
          if (valid) {
            userApi.save(this.activeSysUser).then((data) => {
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
              })
            })
          } else {
            return false
          }
        })
      },
      cancel () {
        this.$router.push('/user')
      }
    }
  }
</script>
